<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Get picture</title>
		<!-- general css -->
		<link rel="stylesheet" href="/stylesheets/general.css" type="text/css">
		<!-- Framework CSS -->
		<link rel="stylesheet" href="/stylesheets/blueprint/screen.css" type="text/css" media="screen, projection">
		<link rel="stylesheet" href="/stylesheets/blueprint/print.css" type="text/css" media="print">
		
		<!--[if lt IE 8]><link rel="stylesheet" href="/stylesheets/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

		<!-- Import fancy-type plugin for the sample page. -->
		<link rel="stylesheet" href="/stylesheets/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
		
		<script type="text/javascript">
			$(document).ready(function() {
				$("#preview").click(function() {
					url = $("#picurl").val();
					$("#preview_image").attr("src", url); 
				});
			})
		</script>
		
	</head>
	<body>
		<div class="container">
			<div class="span-16 prepend-1">
				<form id='pform' action='/addpic' method='post'>
					<p>
					  <label for="pkey">Key's name</label><br>
					  <input type='text' id='pkey' name='pkey' /> 
					</p>
					<p>
					  <label for="picurl">URL</label><br>
					  <input type='text' id='picurl' name='picurl' /> <input type='button' id='preview' value='Preview' />
					</p>
					<p>
					  <label for="pictitle">Say something about your picture</label><br>
					  <textarea id='pictitle' name='pictitle' cols='60' rows='3'></textarea>
					</p>
					<p>
					  <input type="submit" value="Get picture" name="submit">
					</p>
				</form>
			</div>
			
			<div class="span-7 last">
				<div class="notice">
				  Get your picture now!
				 
				</div>
				<img src='' width="150px" id='preview_image' />
			</div>
		</div>
	</body>
</html>